<div class="row" style="min-width: 1400px;text-align: center">
  <div class="row" style="height: 90px;background-color: #1e88e5"></div>
  <div class="row" style="margin: 30px 0 30px 0">
    <div class="col-sm-4 col-xs-4"></div>

    <div class="col-sm-4 col-xs-4">
      <!--<div class="thumbnail" style="background-color: #f6f6ff;height: 100%">
        <ul class="list-group">
          <div style="margin-top: 50px">
            <p>欢迎您注册网站，如果您已拥有账户则可在此<a routerLink="/login">登录</a></p>
            <hr>
          </div>
          <div class="input-group" style="margin-bottom: 25px;margin-top: 50px">
            <span class="input-group-addon" id="basic-addon1">用&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名：</span>
            <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
          </div>
          <div class="input-group" style="margin-bottom: 25px">
            <span class="input-group-addon" id="basic-addon2">设置密码：</span>
            <input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
          </div>
          <div class="input-group" style="margin-bottom: 25px">
            <span class="input-group-addon" id="basic-addon3">确认密码：</span>
            <input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1">
          </div>
          <div class="input-group" style="margin-bottom: 25px">
                  <span class="input-group-addon" id="basic-addon4">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;机:</span>
            <input type="text" class="form-control" placeholder="Mobile phone" aria-describedby="basic-addon1">
          </div>
          <div class="input-group" style="margin-bottom: 25px">
                  <span class="input-group-addon" id="basic-addon5">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;箱:</span>
            <input type="text" class="form-control" placeholder="E-mail" aria-describedby="basic-addon1">
          </div>
          <button type="button" class="btn btn-success" style="margin-left: 40%">立即注册</button>
        </ul>
      </div>-->
      <h2>用户注册</h2>
      <hr>
      <form #registerForm="ngForm">
        <div class="form-group row has-success">
          <a href="http://cn.gravatar.com/" target="_blank">关于Gravatar头像</a>
          <label for="email" class="col-xs-2 form-control-label">电子邮箱</label>
          <div class="col-xs-10">
            <input [(ngModel)]="user.email" required name="email" class="form-control form-control-success"
                   type="email" id="email" placeholder="请输入电子邮箱" placement="top" ngbTooltip="电子邮箱将作为Gravatar头像的凭证">
          </div>
        </div>
        <hr>
        <div class="form-group row has-success">
          <label for="nickName" class="col-xs-2 form-control-label">昵称</label>
          <div class="col-xs-10">
            <input [(ngModel)]="user.nickName" required name="nickName" class="form-control form-control-success"
                   type="text" id="nickName" placeholder="请输入昵称" placement="top" ngbTooltip="昵称长度应在1到5个字符之间">
          </div>
        </div>
        <hr>
        <div class="form-group row has-success">
          <label for="passWord" class="col-xs-2 form-control-label">密码</label>
          <div class="col-xs-10">
            <input [(ngModel)]="user.passWord" required name="passWord" class="form-control form-control-success"
                   type="password" id="passWord" placeholder="请输入密码">
          </div>
        </div>
        <hr>
        <div class="form-group row has-success">
          <label for="repassword" class="col-xs-2 form-control-label">重复密码</label>
          <div class="col-xs-10">
            <input [(ngModel)]="repassword" required name="repassword" class="form-control form-control-success"
                   type="password" id="repassword" placeholder="请重复输入密码">
          </div>
        </div>
        <hr>
        <div class="form-group row has-success">
          <label for="phone" class="col-xs-2 form-control-label">手机号码</label>
          <div class="col-xs-10">
            <input [(ngModel)]="user.phone" required name="phone" class="form-control form-control-success"
                   type="number" id="phone" placeholder="请输入手机号码">
          </div>
        </div>
        <hr>
        <div class="form-group row has-success">
          <label for="address" class="col-xs-2 form-control-label">地址</label>
          <div class="col-xs-10">
            <input [(ngModel)]="user.address" required name="address"
                   class="form-control form-control-success" type="text" id="address" placeholder="请输入地址">
          </div>
        </div>
        <hr>
        <div class="form-group row has-success">
          <label class="col-xs-2 form-control-label">性别</label>
          <div class="col-xs-10">
            <input [(ngModel)]="user.sex" required name="sex"
                   type="radio" value="male">男
            <input [(ngModel)]="user.sex" required name="sex"
                   type="radio" value="female">女
          </div>
        </div>
        <hr>
        <div class="form-group row has-success">
          <label for="birthday" class="col-xs-2 form-control-label">生日</label>
          <div class="col-xs-10">
            <input [(ngModel)]="user.birthday" required name="birthday" class="form-control form-control-success"
                   type="date" id="birthday">
          </div>
        </div>
        <hr>
        <div class="form-group row has-success">
          <label for="individualitySignature" class="col-xs-2 form-control-label">个性签名</label>
          <div class="col-xs-10">
            <input [(ngModel)]="user.individualitySignature" required name="individualitySignature"
                   class="form-control form-control-success" type="text" id="individualitySignature"
                   placeholder="请输入个性签名">
          </div>
        </div>
        <hr>
        <ng-container [ngSwitch]="!!errorMessage">
          <ngb-alert type="danger" *ngSwitchCase="true" [dismissible]="false">
            {{errorMessage}}
          </ngb-alert>
          <ngb-alert type="success" *ngSwitchCase="false" [dismissible]="false">
            确认注册信息无误后，点击下方“提交注册”按钮。
          </ngb-alert>
        </ng-container>

        <hr>
        <button type="submit" [disabled]="!registerForm.form.valid" (click)="register()" class="btn btn-primary">提交注册</button>

      </form>
    </div>

    <div class="col-sm-4 col-xs-4"></div>
  </div>
</div>


